<template>
  <view class="container">
    <!-- 导航栏 -->
    <custom-tabbar :current="2" /> <!-- 假设政策中心是第三个导航项 -->

    <!-- 政策列表 -->
    <uni-section title="学科交叉建设政策" type="line">
      <uni-card 
        v-for="(item, index) in policyList" 
        :key="index"
        :cover="item.cover"
        :title="item.title"
        :sub-title="item.subTitle"
        @click="viewDetail(item)"
      >
        <!-- 封面图 -->
        <!-- <image slot="cover" class="policy-cover" :src="item.cover" mode="aspectFill" /> -->
        
        <!-- 内容区域 -->
        <view class="policy-content">
          <text class="uni-body">{{ item.description }}</text>
          <view class="meta-info">
            <text class="publish-date">{{ item.date }}</text>
            <text class="view-count">浏览 {{ item.views }} 次</text>
          </view>
        </view>

        <!-- 操作栏 -->
        <view slot="actions" class="card-actions">
          <view class="action-item" @click.stop="collectPolicy(item)">
            <uni-icons type="star" size="18" :color="item.collected ? '#ffca28' : '#999'"></uni-icons>
            <text class="action-text">{{ item.collected ? '已收藏' : '收藏' }}</text>
          </view>
          <view class="action-item" @click.stop="sharePolicy(item)">
            <uni-icons type="redo" size="18" color="#999"></uni-icons>
            <text class="action-text">分享</text>
          </view>
          <view class="action-item" @click.stop="viewDetail(item)">
            <uni-icons type="eye" size="18" color="#999"></uni-icons>
            <text class="action-text">查看详情</text>
          </view>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      policyList: [
        {
          id: 1,
          title: "学科交叉建设政策",
          subTitle: "2023年度最新政策",
          cover: "/static/policy/1.jpg",
          description: "推动学科深度交叉融合，建立跨学科研究激励机制...",
          date: "2023-08-15",
          views: 245,
          collected: false
        },
        {
          id: 2,
          title: "交叉科研项目申报指南",
          subTitle: "申报流程与要求",
          cover: "/static/policy/2.jpg",
          description: "2023年度交叉学科重点项目申报指南及注意事项...",
          date: "2023-08-10",
          views: 178,
          collected: true
        },
        {
          id: 3,
          title: "学科交叉教学改革政策",
          subTitle: "教学创新实施方案",
          cover: "/static/policy/3.jpg",
          description: "推进跨学科课程体系建设，鼓励联合授课...",
          date: "2023-08-05",
          views: 156,
          collected: false
        },
		{
		          id: 4,
		          title: "人才计划",
		          subTitle: "高层次人才培养计划",
		          cover: "/static/policy/4.jpg",
		          description: "实施交叉学科领域高层次人才专项培养计划...",
		          date: "2023-08-01",
		          views: 198,
		          collected: false
		        }
      ]
    }
  },
  methods: {
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/policy/detail?id=${item.id}`
      })
    },
    collectPolicy(item) {
      item.collected = !item.collected
      uni.showToast({
        title: item.collected ? '收藏成功' : '取消收藏',
        icon: 'none'
      })
    },
    sharePolicy(item) {
      uni.share({
        title: item.title,
        content: item.description,
        href: `https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg`
		// `https://yourdomain.com/policy/${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.policy-cover {
  width: 100%;
  height: 360rpx;  /* 统一高度 */
  border-radius: 16rpx 16rpx 0 0;
  object-fit: cover; /* 关键属性：保持比例裁剪 */
  display: block;
  overflow: hidden;  /* 隐藏溢出部分 */
}
/* 新增图片容器样式 */
.uni-card__cover {
  position: relative;
  min-height: 360rpx;  /* 最小高度保证布局 */
  max-height: 360rpx;  /* 最大高度限制 */
  background: #f8f8f8;  /* 加载时的背景色 */
}
.policy-content {
  padding: 20rpx 0;
  
  .meta-info {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #666;
  }
}

.card-actions {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  
  .action-item {
    display: flex;
    align-items: center;
    
    .action-text {
      margin-left: 10rpx;
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>